/**
 * 学习目标：了解路由的底层原理
 */

import React, { Component } from 'react'

export default class App extends Component {
    state = {
        currentHash: ''
    }
    // hashchange: 锚点值（hash）改变就会触发
    componentDidMount() {
        // 注册事件， 注意hashchange不要写成驼峰式，这是原生JS的语法
        // 1 监听url的变化，从location，获取url路径
        window.addEventListener('hashchange', () => {
            console.log(window.location.hash);
            // 2. 声明一个状态，保存url路径。监听url的变化，更新state.currentHash
            this.setState({ currentHash: window.location.hash.slice(1) })
        })
    }
    render() {
        const { currentHash } = this.state
        return (
            <div>
                <h1>app组件</h1>
                <ul>
                    <li>
                        <a href="#/home">首页</a>
                    </li>
                    <li>
                        <a href="#/my">我的音乐</a>
                    </li>
                    <li>
                        <a href="#/friend">我的朋友</a>
                    </li>
                </ul>
                {currentHash === '/home' && <Home></Home>}
                {currentHash === '/my' && <My></My>}
                {currentHash === '/friend' && <Friend></Friend>}
            </div>
        )
    }
}
// 0. 创建子组件
function Home() {
    return <div>home</div>
}
function My() {
    return <div>My</div>
}
function Friend() {
    return <div>Friend</div>
}